<template>
  <el-container id="app">
    <el-header height="auto">
      <el-menu :default-active.sync="activeIndex" mode="horizontal" router>
        <el-submenu index="1">
          <template slot="title">ele封装测试</template>
          <el-menu-item index="ele" :route="{name: 'Ele'}">ele封装测试</el-menu-item>
        </el-submenu>
        <el-submenu index="2">
          <template slot="title">表格</template>
          <el-menu-item index="TableTest" :route="{name: 'TableTest'}">表格方向键</el-menu-item>
          <el-menu-item index="TableBox" :route="{name: 'TableBox'}">审核表格</el-menu-item>
          <el-menu-item index="DefaultTable" :route="{name: 'DefaultTable'}">DefaultTable</el-menu-item>
          <el-menu-item index="FancyGrid" :route="{name: 'FancyGrid'}">FancyGrid</el-menu-item>
          <el-menu-item index="VoucherTable" :route="{name: 'VoucherTable'}">凭证表格</el-menu-item>
        </el-submenu>
        <el-menu-item index="Editor" :route="{name: 'Editor'}">Editor</el-menu-item>
        <el-menu-item index="QuillEditor" :route="{name: 'QuillEditor'}">QuillEditor</el-menu-item>
        <el-menu-item index="ExtendsTest" :route="{name: 'ExtendsTest'}">继承测试</el-menu-item>
        <el-menu-item index="OssFile" :route="{name: 'OssFile'}">OSS图片处理</el-menu-item>
        <el-submenu index="print">
          <template slot="title">打印模版设计</template>
          <el-menu-item index="PrintTemp" :route="{name: 'PrintTemp'}">编辑器模版</el-menu-item>
          <el-menu-item index="HPrint" :route="{name: 'HPrint'}">hi_print_js</el-menu-item>
          <!-- <el-menu-item index="VPrint" :route="{name: 'VPrint'}">vue-plugin-hiprint</el-menu-item>
          <el-menu-item index="SvPrint" :route="{name: 'SvPrint'}">sv-print</el-menu-item> -->
        </el-submenu>
        <el-submenu index="umyUI">
          <template slot="title">umy虚拟表格测试</template>
          <el-menu-item index="GridTable" :route="{name: 'GridTable'}">grid虚拟表格</el-menu-item>
        </el-submenu>
        <el-submenu index="vxe-table">
          <template slot="title">vxe-table</template>
          <el-menu-item index="VXTable" :route="{name: 'VXTable'}">VxeTable虚拟表格</el-menu-item>
          <el-menu-item index="VxkTable" :route="{name: 'VxkTable'}">方向键扩展</el-menu-item>
        </el-submenu>
        <el-menu-item index="Dialog" :route="{name: 'Dialog'}">弹出测试</el-menu-item>
      </el-menu>
    </el-header>

    <el-main>
      <router-view></router-view>
    </el-main>
  </el-container>
</template>

<script>
  export default {
    name: 'App',
    data() {
      return {
        activeIndex: null
      }
    }
  }
</script>

<style lang="less">
  html, body {
    height: 100%;
    padding: 0;
    margin: 0;
    overflow: hidden;
  }

  html, body, p, div, span, ul, li, ol, table, tr, td, th {
    padding: 0;
  }

  .el-container {
    height: 100%;
    overflow: hidden;

    .el-header {
      padding: 0;
    }

    .el-main {
      height: 100%;
      padding: 0;
      overflow-x: hidden;
    }
  }

</style>
